<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('admin').className='selected';
                }
                window.onload=title;
            </script>
            <h:form id="incomeCreate" enctype="multipart/form-data">
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Compensação de Convênios
                </h1>
                <p:growl autoUpdate="true"/>
                <div class="row">
                    <div class="twelve columns">
                        <fieldset>
                            <legend> <h4 style="margin:0 0 10px 0">Filtros</h4></legend>
                            <p:panel id="resultPanel" style="background: none; border: none;" 
                                     styleClass="container_24 clearfix " >

                                <p:outputLabel for="pojoPickList" value="Convênio:" styleClass="grid_2"/>


                                <p:pickList id="pojoPickList" value="#{managerFinancial.listOperators}" 
                                            var="operator" style="width:80%; padding-left: 7px;"
                                            itemValue="#{operator}" itemLabel="#{operator.name}" 
                                            converter="operatorconverter"  
                                            showCheckbox="true" 
                                            showSourceFilter="true" showTargetFilter="true" 
                                            filterMatchMode="contains" >  

                                    <f:facet name="sourceCaption">Convênios</f:facet>  
                                    <f:facet name="targetCaption">Selecionados</f:facet>  

                                    <p:column style="width:100%;">  
                                        #{operator.ans}-#{operator.name}  
                                    </p:column>  

                                </p:pickList>

                                <div class="clear"></div>

                                <p:outputLabel value="Tipo de Procedimento:" styleClass="grid_3" style="margin-left: -28px;"/> 
                                <div class="grid_16">
                                    <p:selectOneMenu style="width: 65%;" panelStyle="width:150px;" 
                                                     value="#{managerFinancial.typeProcedure}" > 
                                        <f:selectItem  itemValue="#{null}" itemLabel="Todas"/>
                                        <f:selectItems value="#{managerFinancial.selectTypeProcedure()}" />
                                    </p:selectOneMenu>
                                </div>

                                <div class="clear"/>

                                <p:outputLabel value="Grupo de Procedimento:" styleClass="grid_3" 
                                               style="margin-left: -28px;"/> 
                                <div class="grid_16">
                                    <p:selectOneMenu style="width: 65%;" panelStyle="width:150px;" 
                                                     value="#{managerFinancial.groupProcedure}" > 
                                        <f:selectItem  itemValue="#{null}" itemLabel="Todas"/>
                                        <f:selectItems value="#{managerFinancial.selectGroupProcedure()}" />
                                    </p:selectOneMenu>
                                </div>

                                <div class="clear"></div>
                                <p:outputLabel for="de" value="De: " styleClass="grid_2"/>  
                                <p:calendar id="de" value="#{managerFinancial.dateInitial}"
                                            styleClass="grid_4"  showOn="button" pattern="dd/MM/yyyy"/> 

                                <p:outputLabel for="ate" value="Até: " styleClass="grid_2"/>  
                                <p:calendar id="ate" value="#{managerFinancial.dateFinal}" 
                                            styleClass="grid_4"  showOn="button" pattern="dd/MM/yyyy"/> 

                                <div class="clear"/>
                                <p:outputLabel value="Compensado: " styleClass="grid_2" style="margin-left: -10px; margin-right: 30px;"/>
                                <div class="grid_16" >
                                    <p:selectOneMenu style="width: 60%;" panelStyle="width:150px;" 
                                                     value="#{managerFinancial.compensado}" > 
                                        <f:selectItem  itemValue="#{null}" itemLabel="Todas"/>
                                        <f:selectItem  itemValue="#{true}" itemLabel="Compensado"/>
                                        <f:selectItem  itemValue="#{false}" itemLabel="Pendente"/>
                                    </p:selectOneMenu>
                                </div>


                                <div class="clear"/>

                                <div class="buttonAction">
                                    <p:commandButton value="Pesquisar" icon="ui-icon-search" process="@form"
                                                     update="@form"
                                                     actionListener="#{managerFinancial.searchByCompensacao()}" />
                                </div>

                                <p:dataTable id="tableEntrada" var="in" value="#{managerFinancial.incomes}" 
                                             selection="#{managerFinancial.incomesACompensar}"
                                             rowIndexVar="rowid"
                                             rowKey="#{in.id}" >

                                    <p:column  selectionMode="multiple" disabledSelection="#{in.compensado}"
                                              style="display: none;" />

                                    <p:column headerText="#">
                                        <f:facet name="header">
                                            <td></td>
                                        </f:facet>
                                        <td class="ui-selection-column" style="background-color: #{in.compensado ? '#37BC0B':'#EB2C31'}" role="gridcell">
                                            <div class="ui-chkbox ui-widget" style="#{in.compensado ? 'display: none':'display: block'}" >
                                                <div class="ui-helper-hidden-accessible">
                                                    <input type="checkbox"  name="incomeCreate:tableEntrada_checkbox" />
                                                </div>
                                                <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
                                                    <span class="ui-chkbox-icon ui-c"></span>
                                                </div>
                                            </div>
                                        </td>
                                    </p:column>

                                    <p:column width="5">
                                        <p:rowToggler />
                                    </p:column>
                                    <p:column headerText="Em" style="white-space: pre-wrap;" width="400"> 
                                        <h:outputText value="#{in.createAt}">
                                            <f:convertDateTime pattern="dd/MM/yyy HH:mm:ss" />
                                        </h:outputText>
                                    </p:column>
                                    <p:column headerText="Paciente" style="white-space: pre-wrap;" width="400">  
                                        <h:outputText value="#{in.diary.customer.name}"/>
                                    </p:column>  
                                    <p:column headerText="Procedimento" width="400" style="white-space: pre-wrap; ">  
                                        <h:outputText value="#{in.procedure.name}"/>
                                    </p:column>  
                                    <p:column headerText="Convênio" width="400" style="white-space: pre-wrap; ">  
                                        <h:outputText value="#{in.diary.operator.name}"/>
                                    </p:column> 
                                    <p:column headerText="Médico" width="400" style="white-space: pre-wrap; ">  
                                        <h:outputText value="#{in.doctor.name}"/>
                                    </p:column> 
                                    <p:column  headerText="Total" width="400" style="text-align: right; ">  
                                        <h:outputText value="#{in.totalAmount}">
                                            <f:convertNumber pattern="#0.00" />
                                        </h:outputText>
                                    </p:column> 
                                    <p:column  headerText="Total Pago" width="400" style="text-align: right; ">  
                                        <h:outputText value="0.00" rendered="#{in.amountPaid eq null}"/>
                                        <!--  rendered="{!in.compensado}"                                      -->
                                        <h:outputText value="#{in.amountPaid}" rendered="#{in.amountPaid ne null}" >
                                            <f:convertNumber pattern="#0.00" />
                                        </h:outputText>
                                    </p:column> 
                                    <p:rowExpansion>

                                        <p:panel style="background: none; width: 97%;" 
                                                 styleClass="container_24 clearfix " header="Detalhes" >

                                            <p:commandButton rendered="#{in.compensado}" value="Cancelar Compensação"
                                                             styleClass="right" icon="ui-icon-closethick"
                                                             actionListener="#{managerFinancial.cancelarCompensacao(rowid)}"
                                                             update="@form" process="@form"/>


                                            <p:outputLabel rendered="#{!in.compensado}" value="Não compensado"  styleClass="grid_4"/>
                                            <p:outputLabel rendered="#{in.compensado}" value="Data Compensação: "  styleClass="grid_4"/>
                                            <h:outputLabel rendered="#{in.compensado}"  value="#{in.dataCompensacao}"  styleClass="grid_17">
                                                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss"/>
                                            </h:outputLabel>
                                            <div class="clear"/>
                                            <p:outputLabel  rendered="#{in.compensado}" value="Conta Bancária: "  styleClass="grid_4"/>
                                            <p:outputLabel rendered="#{in.compensado}"  value="#{in.cash.contaBancaria.toString()}"  styleClass="grid_17"/>
                                            <div class="clear"/>
                                            <p:outputLabel  rendered="#{in.compensado}" value="Usuário Responsável: "  styleClass="grid_4"/>
                                            <p:outputLabel rendered="#{in.compensado}"  value="#{in.responsavelCompensacao.name}"  styleClass="grid_17"/>

                                            <p:commandButton rendered="#{!in.compensado}" value="Alterar Valores"
                                                             styleClass="right" icon="ui-icon-closethick"
                                                             onclick="dlgAlterIncome.show();"
                                                             actionListener="#{managerFinancial.loadValor(rowid)}"
                                                             update="@this, :incomeCreate:panelAlterIncome" process="@this"/>
                                        </p:panel>
                                    </p:rowExpansion>
                                    <p:columnGroup type="footer">
                                        
                                        <p:row>
                                            <p:column colspan="8" footerText="Compensado " style="text-align:right"/>
                                            <p:column footerText="#{managerFinancial.amountTotal}"  style="text-align:right"/>
                                            <p:column footerText="#{managerFinancial.total}"  style="text-align:right"/>
                                        </p:row>
                                        <p:row>
                                            <p:column colspan="9" footerText="Pendente " style="text-align:right"/>
                                            <p:column footerText="#{managerFinancial.totalAmountPending}"  style="text-align:right"/>
                                        </p:row>
                                        <p:row>
                                            <p:column colspan="9" footerText="Total " style="text-align:right; font-weight: bold;"/>
                                            <p:column footerText="#{managerFinancial.total.add(managerFinancial.totalAmountPending)}" 
                                                      style="text-align:right; font-weight: bold;"/>
                                        </p:row>

                                    </p:columnGroup>                                 
                                </p:dataTable>
                                <br/>
                                <div class="clear"/>

                                <fieldset>
                                    <legend> <h4 style="margin:0 0 10px 0">Compensar</h4></legend>
                                    <p:outputLabel  value="Conta Bancária:" styleClass="grid_4"/>  
                                    <p:autoComplete id="banco"  value="#{managerFinancial.contaBancaria}" 
                                                    styleClass="grid_10"
                                                    var="item1" forceSelection="true" dropdown="true" 
                                                    minQueryLength="3" itemValue="#{item1}" itemLabel="#{item1}" 
                                                    panelStyle="max-height:200px;"  
                                                    completeMethod="#{managerCash.autocompleteContaBancarias}" 
                                                    converter="contabancariaconverter">
                                    </p:autoComplete>
                                    <div class="clear"/>
                                    <p:outputLabel for="compensarem" value=" em: " styleClass="grid_4"/>  
                                    <p:calendar id="compensarem" value="#{managerFinancial.dataCompensacao}"
                                                styleClass="grid_4"  showOn="button" pattern="dd/MM/yyyy"/> 
                                    <div class="clear"/>
                                    <div class="buttonAction">
                                        <p:commandButton value="Compensar" icon="ui-icon-plus" process="@form"
                                                         update="@form"
                                                         actionListener="#{managerFinancial.compensarPagamentoConvenio()}" />
                                    </div>
                                </fieldset>
                            </p:panel>
                        </fieldset>
                    </div>
                </div>
                <p:dialog id="dlgAlterIncome"  widgetVar="dlgAlterIncome"
                          header="Alterar valor do atendimento" modal="true"
                          width="700" closeOnEscape="true"  dynamic="true" > 

                    <p:ajax event="close" update="@form" />
                    <p:messages autoUpdate="true" />
                    <p:panel id="panelAlterIncome" style="background: none; width: 97%;" 
                             styleClass="container_24 clearfix " >

                        <p:outputLabel value="" styleClass="grid_23" />
                        <p:outputLabel value="Valor Total: " styleClass="grid_4" />
                        <p:inputText value="#{managerFinancial.newValueAmountTotal}" 
                                     styleClass="grid_5" onkeypress="jQuery(this).autoNumeric({aSign:'R$ ',aSep: '.', aDec: ','} );">
                            <f:convertNumber type="currency" locale="pt,BR"/>
                        </p:inputText>

                        <p:outputLabel value="Valor Pago: " styleClass="grid_4" />
                        <p:inputText value="#{managerFinancial.newValueAmountPaid}" 
                                     styleClass="grid_5" onkeypress="jQuery(this).autoNumeric({aSign:'R$ ',aSep: '.', aDec: ','} );">
                            <f:convertNumber type="currency" locale="pt,BR"/>
                        </p:inputText>
                        <div class="clear"/>
                        <p:outputLabel value="Data" styleClass="grid_4" />
                        <p:calendar value="#{managerFinancial.dataIncome}" styleClass="grid_6" showOn="button">
                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
                        </p:calendar>

                        <div class="clear"/>
                        <div class="buttonAction">
                            <p:commandButton value="Atualizar"
                                             icon="ui-icon-disk"
                                             actionListener="#{managerFinancial.alterarValor()}"
                                             update="@this, :incomeCreate:panelAlterIncome" process="@this, :incomeCreate:panelAlterIncome"/>
                        </div>

                    </p:panel>
                </p:dialog>

                <p:dialog id="dlgOperator"  widgetVar="dlgOperatorDialog"
                          header="Selecionar Convênio" modal="true"
                          width="800"  dynamic="true" > 

                    <p:ajax event="close" update="@form" />

                    <p:panel id="operatorPanelSearch" style="background: none; border: none;" 
                             styleClass="container_24 clearfix ">


                        <p:dataTable var="opt" id="operatorDataTable" 
                                     value="#{managerFinancial.operators}"  
                                     emptyMessage="Nenhum registro encontrado" 
                                     paginatorPosition="bottom" paginator="true" rows="10"
                                     rowKey="#{opt.id}" selection="#{managerFinancial.operatorSelect}"
                                     selectionMode="single">
                            <f:facet name="header">
                                Convênios
                            </f:facet> 
                            <p:ajax event="rowSelect"  process="@this" update="@this"/>
                            <p:ajax event="rowUnselect"  process="@this" update="@this"/>
                            <p:column  headerText="Descrição"  style="white-space: pre-wrap;"  >  
                                <h:outputText value="#{opt.name}" />  
                            </p:column>
                            <p:column  headerText="ANS" >  
                                <h:outputText value="#{opt.ans}" />  
                            </p:column>

                        </p:dataTable>

                        <div class="buttonAction">
                            <p:commandButton value="Selecionar" icon="ui-icon-search"
                                             update="@this" 
                                             process="@this"
                                             actionListener="#{managerFinancial.selectOperator()}"
                                             oncomplete="dlgOperatorDialog.hide();" />
                        </div>
                    </p:panel>
                </p:dialog>

                <script type="text/javascript">
                    /* <![CDATA[ */
                    $(document).ready(function() {
                        $('#incomeCreate\\:tableEntrada tr').each(function(index) {
                            if ($(this).hasClass('ui-state-highlight')) {
                                $(this).find('.ui-chkbox-box').addClass('ui-state-active');
                                $(this).find('.ui-chkbox-icon').addClass('ui-icon ui-icon-check')
                            }
                        });

                        $('#incomeCreate\\:tableEntrada td').on('click', function(e) {
                            if (!$(e.target).is('.ui-chkbox-box') && !$(e.target).is('.ui-row-toggler') && !$(e.target).is('.ui-chkbox-icon')) {
                                e.stopPropagation();
                            }
                        });
                    });
                    /* ]]> */
                </script>

            </h:form>

        </ui:define>
    </ui:composition>

</html>
